<template>
  <!--登录框-->
  <el-dialog :visible.sync="dialogLogin" width="560px">
    <div>
      <div class="login-header">
        <img src="../../assets/images/logo.png" />
      </div>
      <div class="login-body">
        <h4 class="xui-text-center">用户登录</h4>
        <el-form ref="form" :model="form">
          <el-form-item>
            <el-input class="padding" v-model="form.username" placeholder="用户名"></el-input>
            <span class="login-icon">
              <img src="../../assets/images/login-user.png" />
            </span>
          </el-form-item>
          <el-form-item class="pw-wrap">
            <!-- <el-input  type="password" ></el-input> -->
            <span class="login-icon">
              <img src="../../assets/images/login-pwd.png" />
            </span>
            <div class="pw-input">
              <input class="el-input__inner" type="password" v-model="form.password" placeholder="密码" @keyup.enter="login">
            </div>

          </el-form-item>
          <el-form-item>
            <el-button @click="login" type="submit">马上登录</el-button>
          </el-form-item>
        </el-form>
        <div class="link">
          <span @click="toPage('findPassword')">找回密码</span>
          <code> | </code>
          <span @click="toPage('register')">立即注册</span>
        </div>
        <div class="other xui-margin-top-md">
          <em>其他登录方式</em>
          <ul class="login-way xui-margin-top-sm xui-text-center">
            <li>
              <a :href="`https://open.weixin.qq.com/connect/qrconnect?appid=${wechat.appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=wechat#wechat_redirect`"
                target="_blank" class="xui-block color-black">
                <!-- <a @click="juem"> -->
                <img src="../../assets/images/wx.png" />
                <!-- <span style="color:#333">微信</span> -->
              </a>
            </li>
            <!-- <li>
                <router-link to="/" class="xui-block">
                  <img src="../../assets/images/qq.png"/>
                  <span>QQ</span>
                </router-link>
              </li>
              <li>
                <router-link to="/" class="xui-block">
                  <img src="../../assets/images/wb.png"/>
                  <span>微博</span>
                </router-link>
              </li> -->
          </ul>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getLoginUser
  } from "@/api/login";
  import {
    getToken
  } from "@/utils/auth";
  import {
    wechat
  } from "@/config/ThirdPartyLogin";
  import {
    rootsUrl
  } from "@/utils/index";

  export default {
    data() {
      return {
        form: {
          username: "",
          password: ""
        },
        wechat
      };
    },
    computed: {
      dialogLogin: {
        get: function () {
          return this.$store.state.user.dialogLogin;
        },
        set: function (newValue) {
          this.$store.dispatch("ToggleLoginDialog", newValue);
        }
      },
      redirect_uri() {
        return encodeURIComponent(rootsUrl[0]);
        // return window.location.href
      }
    },
    methods: {
      login() {
        this.$store.dispatch("LoginByUsername", this.form);
      },
      toPage(routeName) {
        this.$router.push({
          name: routeName
        });
        this.$store.dispatch("ToggleLoginDialog", false);
      },
      juem() {
        console.log(
          `https://open.weixin.qq.com/connect/qrconnect?appid=${this.wechat.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=snsapi_login&state=wechat#wechat_redirect`
        )
      }
    }
  };

</script>

<style lang="less" scoped>
  .login-header {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 20px;

    img {
      margin-top: -20px;
    }
  }

  .login-body {
    width: 360px;
    margin: 20px auto;

    .link {
      text-align: center;
      color: #220016;
      font-size: 14px;

      span {
        cursor: pointer;
      }

      span:hover {
        color: #c9a45c;
      }
    }

    .other {
      em {
        position: relative;
        text-align: center;
        display: block;
      }

      em:before {
        width: 116px;
        height: 2px;
        background-color: #f5f5f5;
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
      }

      em:after {
        width: 116px;
        height: 2px;
        background-color: #f5f5f5;
        content: "";
        position: absolute;
        right: 0;
        top: 12px;
      }

      .login-way li {
        display: inline-block;
        width: 32.33%;
        text-align: center;

        span {
          display: block;
          text-align: center;
        }

        img {
          display: inline-block;
        }
      }

      .login-way li:first-child {
        span {
          color: #00bb00;
        }
      }

      .login-way li:nth-child(2) {
        span {
          color: #2a9cd5;
        }
      }

      .login-way li:last-child {
        span {
          color: #c90000;
        }
      }
    }
  }

  .el-button {
    width: 100%;
  }

  .el-button {
    background: #ad8c46;
    border: 1px solid #ad8c46;
    color: #fff;
    font-size: 18px;
    border-radius: 0;
  }

  .el-input {
    padding-left: 40px;
  }

  .el-form-item {
    position: relative;
  }

  .el-form-item .login-icon {
    display: block;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    background-color: #f3f3f3;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-right: 0;
  }

  .el-form-item .login-icon>img {
    display: inline-block;
    vertical-align: middle;
  }

  .pw-wrap {
    position: relative;

    .login-icon {
      position: absolute;
      left: 0;
    }

    .pw-input {
      padding-left: 40px;
    }
  }

</style>
